<style type="text/css">
    .header-title {
        font-size: 0.4rem;
        height: 1.085rem;
        font-family: 'Microsoft YaHei';
        font-weight: bold;
        background-color: red;
        color: white;
        letter-spacing: 0.05rem;
    }
    .panel-search {
        position: relative;
        margin-top: 0rem;
        z-index: 0;
    }
    
    .irefresh img{
        width: 0.5rem;
    }
    .refreshing {
        animation-name: rotation;
        animation-duration: 0.5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes rotation {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .search-box {
        margin-left: 0.25rem;
        height: 2.1rem;
    }
    .search-tag img {
        height: 1.85rem;
        width: 2.45rem;
        border-radius: 0.15rem;
    }
    .search-item .bui-btn {
        background-color: transparent;
        border-width: 0px;
    }
    .search-item .bui-btn .bui-pic {
        border-style: dotted;
        border-color:darkgray;
        border-radius: 0.15rem;
        height: 1.8rem;
        width: 2.5rem;
        padding: 0.05rem;
        margin-top: 10px;
        font-size: 0.08rem;
       
    }
    .item-btn, .more {
        float: left;
    }
    .item-btn .more {
        padding-left: 0rem;
    }
    .item-name {
        font-weight: bold;
        font-size: 0.35rem;
        margin-bottom: 0.1rem;
    }
    .item-detail {
        margin-top: 0.1rem;
        font-size: 0.3rem;
        float: left;
    }
    .item-detail img {
        height: 0.3rem;
        width: 0.3rem;
        margin-right: 0.1rem
    }
    .item-dis {
        width: 100%;
    }
    .more-content {
        font-size: 0.3rem;
        font-weight: bold;
    }
    .icon-tag {
        float: right;
        margin-top: 0.18rem;
        margin-left: 0.03rem
    }
    .icon-tag img {
        width: 0.5rem;
        height: 0.5rem;
    }
</style>

<div class="bui-page bui-box-vertical searchpage">
    <header>
        <div class="bui-bar header-title" style="background-color: red;">
            <div class="bui-bar-left"></div>
            <div class="bui-bar-main" style="font-size: 0.4rem;">寻找</div>
            <div class="bui-bar-right">
                <div class="bui-btn irefresh" onclick="bui.refresh();">
                    <i class="icon-refresh"></i>
                </div>
            </div>
        </div>
        
    </header>

    <main>
        <!-- <div class="panel-loading bui-box-center" style="height: 1.5rem">
            <img class="refreshing" src='images/search/loading.png' style="width: 0.6rem">
        </div> -->
        <div class="panel-loading bui-box-center" style="position: absolute; z-index: 1; height: 2rem; width: 2rem; background-color: #4e4a4a6e; top: 40%; left: 40%; border-radius: 0.2rem">
            <div class="bui-box-center" style="position: absolute; width: 100%; top: 30%">
                <img class="refreshing" src='images/search/loading.png' style="width: 0.6rem;">
            </div>
            <div style="position: absolute; width: 100%; top: 65%; color: #ebebeb">数据加载中</div>
            <!-- <div class="loading-hint" style="position:relative">lll</div> -->
        </div>
        <div class="panel-search" id = "panel-search">
            <div class="bui-box bui-box-align-middle search-box" style=" margin-top: 0.2rem;">
                <div class="search-tag bui-box-align-middle">
                    <img src="images/search/search0.png">
                </div>
                <div class="span1 search-list">
                    <!-- 滚动图片 -->
                    <div class="bui-scroll-x">
                        <div class="bui-scroll-main">
                            <ul id='entertainment' class="bui-list-pic">
                                
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bui-box bui-box-align-middle search-box">
                <div class="search-tag bui-box-align-middle">
                    <img src="images/search/search4.png">
                </div>
                <div class="span1 search-list">
                    <!-- 滚动图片 -->
                    <div class="bui-scroll-x">
                        <div class="bui-scroll-main">
                            <ul id="study" class="bui-list-pic">
                                
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bui-box bui-box-align-middle search-box">
                <div class="search-tag bui-box-align-middle">
                    <img src="images/search/search2.png">
                </div>
                <div class="span1 search-list">
                    <!-- 滚动图片 -->
                    <div class="bui-scroll-x">
                        <div class="bui-scroll-main">
                            <ul id="outdoor" class="bui-list-pic">
                                
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bui-box bui-box-align-middle search-box">
                <div class="search-tag bui-box-align-middle">
                    <img src="images/search/search3.png">
                </div>
                <div class="span1 search-list">
                    <!-- 滚动图片 -->
                    <div class="bui-scroll-x">
                        <div class="bui-scroll-main">
                            <ul id="sports" class="bui-list-pic">
                                
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bui-box bui-box-align-middle search-box">
                <div class="search-tag bui-box-align-middle">
                    <img src="images/search/search1.png">
                </div>
                <div class="span1 search-list">
                    <!-- 滚动图片 -->
                    <div class="bui-scroll-x">
                        <div class="bui-scroll-main">
                            <ul id="userdefined" class="bui-list-pic">
                                
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>